<!--
 * @Description: 项目管理成果关键词
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2021-09-06 10:06:16
 * @LastEditTime: 2021-09-09 10:22:21
 * @FilePath: \cscec-pms-admin\src\views\project\achievementKey\index.vue
-->
<template>
  <base-breadcrumb class="flexMemberInfo-container">
    <!-- 搜索 -->
    <searchData
      :search-data="searchOption"
      @search="search"
    />
    <!-- 搜索 -->
    <a-card>
      <title-name :title="$route.meta.title" />
      <!-- 表格 -->
      <b-table
        ref="table"
        :columns="columns"
        :request="loadData"
        :page-keys=" ['pageNo', 'pageSize', 'totalSize']"
        :is-show-count-bar="false"
        bordered
      >
        <template slot="prefix">
          <a-button
            v-btnPermission="[{code:'seex_pm_038_add_02',ident:'prma_seex'},{code:'buco_pm_038_add_02',ident:'prma_buco'}]"
            type="primary"
            icon="plus"
            @click="handleAdd"
          >
            新增
          </a-button>
        </template>
        <template
          slot="contractScope"
          slot-scope="text"
        >
          <ellipsis
            :length="140"
            tooltip
          >
            {{ text }}
          </ellipsis>
        </template>
        <template
          slot="operation"
          slot-scope="text,record"
        >
          <a
            v-btnPermission="[{code:'seex_pm_038_edi_03',ident:'prma_seex'},{code:'buco_pm_038_edi_03',ident:'prma_buco'}]"
            @click="handleOperation('edit', record)"
          >编辑</a>
          <a-divider type="vertical" />
          <a
            v-btnPermission="[{code:'seex_pm_038_dei_04',ident:'prma_seex'},{code:'buco_pm_038_dei_04',ident:'prma_buco'}]"
            @click="handleOperation('delete', record)"
          >删除</a>
        </template>
      </b-table>
      <!-- 表格 -->
    </a-card>
    <!-- 操作模态框 -->
    <base-modal
      :title="title"
      :closable="true"
      :visible="visible"
      width="900px"
      ok-text="提交"
      :confirm-loading="confirmLoading"
      @cancel="handleClose"
      @ok="handleOk"
    >
      <custom-form
        ref="form"
        :is-validate="true"
        :edit-model="''"
        :rules="rules"
        :form="form"
        :form-list="formOption"
      >
        <template slot="names">
          <BaseTextarea v-model="form.names" />
          <p>支持批量录入，不同关键词以分号分隔</p>
        </template>
      </custom-form>
    </base-modal>
    <!-- 操作模态框 -->
  </base-breadcrumb>
</template>
<script>
import { Ellipsis } from '@/components'
import BaseModal from '@/components/BaseModal'
import { getProjectCommon } from '@/api/project/stopConstruction'
import achievementKey from '@/api/project/achievementKey'
import cloneDeep from 'lodash.clonedeep'
export default {
  name: 'Achievement',
  components: {
    BaseModal,
    Ellipsis
  },
  data() {
    return {
      // 搜索选项
      searchOption: [
        {
          name: '关键词',
          value: 'name',
          type: 'input'
        }
      ],
      // 查询参数
      searchData: {},
      //表格数据加载
      loadData: async (q) => {
        const params = Object.assign(q, this.searchData, { type: '38' })
        let res = await getProjectCommon(params)
        if (res.code === 200) {
          return { code: 200, data: res.data, ...res }
        }
        return { code: 200, data: [] }
      },
      // 表头
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender: (text, record, index) => {
            return index + 1
          }
        },
        {
          title: '关键词',
          dataIndex: 'name',
          scopedSlots: { customRender: 'contractScope' }
        },
        {
          title: '状态',
          width: 100,
          align: 'center',
          dataIndex: 'enabledCode',
          customRender: (text) => {
            return text === '1' ? '可用' : '不可用'
          }
        },
        {
          title: '创建人',
          width: 200,
          dataIndex: 'creatorName'
        },
        {
          title: '创建时间',
          width: 160,
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 170,
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 模态框显示隐藏
      visible: false,
      // 模态框标题
      title: '',
      // 表单
      form: {},
      // 模态框类型
      type: '',
      //模态框提交
      confirmLoading: false
    }
  },
  computed: {
    // 表单选项
    formOption() {
      let list = []
      if (this.type === 'add') {
        list = [
          {
            label: '关键词',
            keyName: 'names',
            rules: [{ required: true, message: '请输入', trigger: 'change' }],
            slot: true,
            span: 24
          }
        ]
      }
      if (this.type === 'edit') {
        list = [
          {
            label: '关键词',
            keyName: 'name',
            type: 'BaseInput',
            attrs: {
              maxLength: 300
            },
            rules: [{ required: true, message: '请输入', trigger: 'change' }],
            span: 12
          },
          {
            label: '状态',
            keyName: 'enabledCode',
            type: 'a-select',
            data: [
              {
                label: '可用',
                value: '1'
              },
              {
                label: '不可用',
                value: '0'
              }
            ],
            rules: [{ required: true, message: '请选择', trigger: 'change' }],
            span: 12
          }
        ]
      }
      return list
    },
    // 校验
    rules() {
      const obj = {}
      this.formOption.map((item) => {
        if (item.rules) {
          obj[item.keyName] = item.rules
        }
      })
      return obj
    }
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 新增
     * @param {Void}
     * @return {Void}
     */
    handleAdd() {
      this.visible = true
      this.type = 'add'
      this.title = '新增项目管理成果关键词'
      this.form = {}
    },
    /**
     * @description: 操作
     * @param {string} type 操作类型
     * @param {object} record 行数据
     * @return {void}
     */
    handleOperation(type, record) {
      switch (type) {
        case 'edit':
          this.visible = true
          this.type = 'edit'
          this.title = '编辑项目管理成果关键词'
          this.form = cloneDeep(record)
          break
        case 'delete':
          const vm = this
          this.$confirm({
            title: '温馨提示',
            content: `确认删除？`,
            okText: '确认',
            okType: 'danger',
            cancelText: '关闭',
            onOk() {
              const { id } = record
              achievementKey
                .delete({
                  id
                })
                .then(({ code, message }) => {
                  if (code === 200) {
                    vm.$message.success('操作成功')
                    vm.search()
                  } else {
                    vm.$message.warning(message)
                  }
                })
            }
          })
          break
      }
    },
    /**
     * @description: 编辑模态框关闭
     * @param {void}
     * @return {void}
     */
    handleClose() {
      this.visible = false
      this.form = {}
      this.$refs.table.getData(null, true)
    },
    /**
     * @description: 提交
     * @param {void}
     * @return {void}
     */
    handleOk() {
      // 新增
      if (this.type === 'add') {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.confirmLoading = true
            let names = this.form.names
              .replace(/\s/g, '')
              .replace(/；/g, ';')
              .split(';')
              .filter((el) => el !== '')
            names = [...new Set(names)]
            achievementKey
              .batchAdd({
                names,
                type: '38'
              })
              .then(({ code, message }) => {
                if (code === 200) {
                  this.$message.success('操作成功')
                  this.handleClose()
                } else {
                  this.$message.warning(message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      }
      // 编辑
      if (this.type === 'edit') {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.confirmLoading = true
            const { id, name, enabledCode } = this.form
            achievementKey
              .edit({ id, name, enabledCode, code: '38' })
              .then(({ code, message }) => {
                if (code === 200) {
                  this.$message.success('操作成功')
                  this.handleClose()
                } else {
                  this.$message.warning(message)
                }
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }else {
            this.$message.warning("请填写完所有必填项信息")
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
